<template>
  <div class="gold-shop-wrap">
    <van-nav-bar title="余额明细" left-arrow fixed @click-left="onClickLeft" />
    <!-- <van-tabs v-model="active">
            <van-tab title="排队中"></van-tab>
            <van-tab title="已完成"></van-tab>
        </van-tabs> -->
    <!-- <div class="subsidy_title">
            <div class="subsidy_title_list" v-for="item, index in titleList" :key="index"
                :class="{ 'active': current === index }" @click="setCurrent(index)">{{ item.name }}</div>
        </div> -->
    <div class="order_tabs">
      <van-tabs
        v-model="current"
        title-active-color="#F32A23"
        :border="true"
        class=""
        @click="setCurrent"
        :ellipsis="false"
      >
        <van-tab
          title="余额明细"
          :title-style="{
            fontWeight: 500,
            fontSize: '14px',
          }"
        ></van-tab>
        <van-tab
          title="排队补贴明细"
          :title-style="{
            fontWeight: 500,
            fontSize: '14px',
          }"
        ></van-tab>
        <van-tab
          title="创客奖励"
          :title-style="{
            fontWeight: 500,
            fontSize: '14px',
          }"
        ></van-tab>
        <van-tab
          title="合伙人奖励"
          :title-style="{
            fontWeight: 500,
            fontSize: '14px',
          }"
        ></van-tab>
        <!-- <van-tab
          title="贡献值奖励"
          :title-style="{
            fontWeight: 500,
            fontSize: '14px',
          }"
        ></van-tab> -->
      </van-tabs>
    </div>
    <van-list
      v-if="current == 0"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="order_all"
        v-for="(item, index) in balanceList"
        :key="index"
        :title="item"
      >
        <div class="order_name_return">
          <div class="order_name_left">余额来源：{{ item.remark }}</div>
        </div>
        <div class="order_lists">
          <div class="order_goods">
            <div class="order_goods_sku">订单金额：{{ item.from_amount }}</div>
            <div class="order_goods_sku">分润金额：{{ item.amount }}</div>
            <div class="order_goods_sku">时间：{{ item.create_time }}</div>
          </div>
          <!-- <div class="balance_amt">+100</div> -->
        </div>
      </div>
    </van-list>
    <van-list
      v-if="current == 1"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="order_all"
        v-for="(item, index) in balanceList"
        :key="index"
        :title="item"
      >
        <!-- <div class="order_name_return">
                    <div class="order_name_left">余额来源</div>
                </div> -->
        <div class="order_lists">
          <div class="order_goods">
            <div class="order_goods_sku">排第一的订单：{{ item.order_no }}</div>
            <div class="order_goods_sku">订单金额：{{ item.payment }}</div>
            <div class="order_goods_sku">应返金额：{{ item.subsidy }}</div>
            <div class="order_goods_sku">已返金额：{{ item.received }}</div>
            <div class="order_goods_sku">本笔返利来源：{{ item.source }}</div>
            <div class="order_goods_sku">本笔返利金额：{{ item.amount }}</div>
            <div class="order_goods_sku">补贴时间：{{ item.subsidy_time }}</div>
          </div>
          <!-- <div class="balance_amt">+100</div> -->
        </div>
      </div>
    </van-list>
    <van-list
      v-if="current == 2 || current == 3 || current == 4"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="order_all"
        v-for="(item, index) in balanceList"
        :key="index"
        :title="item"
      >
        <div class="order_lists">
          <div class="order_goods">
            <div class="order_goods_name">{{ item.remark }}</div>
            <div class="order_goods_time">{{ item.create_time }}</div>
            <!-- <div class="order_goods_sku">订单金额：</div> -->
          </div>
          <div class="balance_amt">{{ item.amount }}</div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { PROFIT_SHARE_LIST, INCOME_LIST,PROFIT_BONUS_LIST } from "@/api/mine";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      //   active: "0",
      current: 0,
      balanceList: [],
      page: 1,
      pageSize: 20,
      titleList: [
        {
          id: 0,
          name: "余额明细",
        },
        {
          id: 1,
          name: "排队补贴明细",
        },
        {
          id: 2,
          name: "创客奖励",
        },
        {
          id: 3,
          name: "合伙人奖励",
        },
      ],
    };
  },
  created() {
    // this.active=this.$route.query.id
    window.scrollTo(0, 0)

  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    // 点击切换tab
    setCurrent(e) {
      this.current = e;
      this.resetInit();
    },
    resetInit() {
      this.page = 1;
      this.balanceList = [];
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
    if (this.current == 1) {
        let data = {
            page_num: this.page,
            page_size: this.pageSize,
        };
        this.fetchData(INCOME_LIST,data);
    } else {
        let params = {
            page_num: this.page,
            page_size: this.pageSize,
            type: this.current == 0 ? 1 : this.current
        };
        if(this.current==0){
            this.fetchData(PROFIT_SHARE_LIST, params);
        }else{
            this.fetchData(PROFIT_BONUS_LIST, params);
        }

    }
},

fetchData(apiUrl, params = {}) {
    this.$http.get(apiUrl, { params: params }).then((res) => {
        const { list } = res.data;
        if (list && list.length) {
            this.page++;
            this.balanceList = this.balanceList.concat(list);

            // 加载状态结束
            this.loading = false;
            if (list.length < this.pageSize) {
                this.finished = true;
            }
        } else {
            this.finished = true;
        }
    });
},
    // onLoad() {
    //   if (this.current == 1) {
    //     let params = {};
    //     params["page_num"] = this.page;
    //     params["page_size"] = this.pageSize;
    //     this.$http.get(INCOME_LIST, { params: params }).then((res) => {
    //       const { list } = res.data;
    //       if (list && list.length) {
    //         this.page++;
    //         this.balanceList = this.balanceList.concat(list);

    //         // 加载状态结束
    //         this.loading = false;
    //         if (list.length < this.pageSize) {
    //           this.finished = true;
    //         }
    //       } else {
    //         this.finished = true;
    //       }
    //     });
    //   } else if (this.current == 4) {
    //     console.log("额外奖励");

    //   } else {
    //     let params = {};
    //     params["page_num"] = this.page;
    //     params["page_size"] = this.pageSize;
    //     params["type"] = this.current == 0 ? 1 : this.current;
    //     if (this.current == 0) {
    //       this.$http.get(PROFIT_SHARE_LIST, { params: params }).then((res) => {
    //         const { list } = res.data;
    //         if (list && list.length) {
    //           this.page++;
    //           this.balanceList = this.balanceList.concat(list);

    //           // 加载状态结束
    //           this.loading = false;
    //           if (list.length < this.pageSize) {
    //             this.finished = true;
    //           }
    //         } else {
    //           this.finished = true;
    //         }
    //       });
    //     } else {
    //       this.$http.get(PROFIT_SHARE_LIST, { params: params }).then((res) => {
    //         const { list } = res.data;
    //         if (list && list.length) {
    //           this.page++;
    //           this.balanceList = this.balanceList.concat(list);

    //           // 加载状态结束
    //           this.loading = false;
    //           if (list.length < this.pageSize) {
    //             this.finished = true;
    //           }
    //         } else {
    //           this.finished = true;
    //         }
    //       });
    //     }
    //   }
    // },
    // 详情
    ordeInfo() {
      this.$router.push({
        path: "/orderInfo",
        query: {
          id: 1,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
  min-height: calc(100vh - 46px);
  padding-top: 46px;
  background: #f5f5f5;

  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
  ::v-deep .van-tabs__line{
    z-index: 0 !important;
  }
}

.subsidy_title {
  // width: 95%;
  margin: 0 auto;
  // margin-top: 0.3rem;
  display: flex;
  font-size: 0.28rem;
  padding: 0.24rem 0.24rem 0 0.24rem;
  background-color: #fff;
  box-sizing: border-box;

  .subsidy_title_list {
    margin-right: 0.4rem;
    // font-size: 0.28rem;
    position: relative;
    color: #666666;
    padding-bottom: 0.24rem;
  }

  .subsidy_title_list.active {
    color: #f32a23;
    font-weight: 500;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px; // 横杠的高度，可以根据需要调整
      background-color: #f32a23; // 红色横杠
    }

    /* 选中时黑色 */
  }
}

.order_all {
  width: 95%;
  margin: 0 auto;
  margin-top: 0.2rem;
  // border: 0.01rem solid #999;
  border-radius: 0.16rem;
  background: #fff;

  .order_name_return {
    display: flex;
    justify-content: space-between;
    font-size: 0.28rem;
    padding: 0.32rem;
    padding-bottom: 0;
    // border-bottom: 0.01rem solid #999;
    box-sizing: border-box;

    .order_name_left {
      font-weight: bold;
    }

    // &_right {
    //     font-size: 0.25rem;
    // }
  }

  .order_lists {
    padding: 0.32rem;
    padding-top: 0.2rem;
    display: flex;
    justify-content: space-between;

    .balance_amt {
      margin-top: 0.3rem;
      font-weight: bold;
      font-size: 0.32rem;
      font-family: PingFangSC, PingFang SC;
      color: #2cc365;
    }

    // img {
    //     width: 1.8rem;
    // }

    .order_goods {
      width: 90%;
      font-size: 0.24rem;
      font-family: PingFangSC, PingFang SC;

      &_name {
        font-size: 0.28rem;
        font-weight: bold;
        margin-bottom: 0.2rem;
      }

      &_sku {
        color: #666666;
        line-height: 0.52rem;
      }

      &_time {
        font-size: 0.25rem;
        color: #999;
      }

      &_price {
        font-size: 0.3rem;
        // font-weight: bold;
        // display: flex;
        // justify-content: space-between;

        span:last-child {
          font-weight: 500;
          font-size: 0.25rem;
          color: #999;
        }
      }
    }
  }

  // .order_total {
  //     margin-left: 2.3rem;
  //     font-size: 0.25rem;
  //     margin-bottom: 0.2rem;
  // }

  // .order_pay {
  //     border-top: 0.01rem solid #999;
  //     display: flex;
  //     justify-content: space-between;
  //     padding: 0.2rem;

  //     .order_pay_money {
  //         font-size: 0.25rem;
  //         margin-top: 0.2rem;
  //     }

  //     .order_pay_btn {
  //         margin-left: 0.2rem;
  //     }
  // }
}
</style>
